<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
			<router-link to="/Individual">
				<b class="colors">/<img style="top: 1px" src="../assets/img/sidebar5.png" />经营者信息</b>
            </router-link>
			<b>/<i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-order"></i>经营者信息详情</b>
			<!-- <el-input placeholder="请输入灵活用工平台名称进行搜索" suffix-icon="el-icon-search" v-model="input1">
			</el-input> -->
			<em v-if="Object.keys(infoObject).length > 0" style="margin-left: -5px;">{{ infoObject.name }}</em>
		</div>
		<el-row :gutter="24" style="margin-bottom: 20px">
			<el-col :span="24">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="pad-loader" v-if="Object.keys(infoObject).length == 0">
						<content-loader :width="710" :height="300" :speed="3" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
							<rect x="98" y="20" rx="6" ry="6" width="300" height="10" />
							<rect x="98" y="50" rx="6" ry="6" width="352" height="10" />
							<rect x="0" y="100" rx="6" ry="6" width="710" height="10" />
							<rect x="0" y="130" rx="6" ry="6" width="680" height="10" />
							<rect x="0" y="160" rx="6" ry="6" width="478" height="10" />
							<circle cx="40" cy="40" r="40" />
						</content-loader>
					</div>
					<div v-else>
						<div class="information" style="overflow: hidden">
							<img class="infoImg" src="../assets/img/img.jpg" />
							<div class="infoTit">
								<b>{{ infoObject.selfBusinessName }}</b>
								<span>经营者：
									<router-link
										:to="{ path: '/serviceDel', query: { id: infoObject.sevicerId } }"
									>
										<i style="color: rgb(50, 108, 240);font-style: normal;">{{ infoObject.legalName }}</i>
									</router-link>
								</span>
								<span style="border: 0; margin-left: 10px">成立时间：{{ format('yyyy-MM-dd', new Date(infoObject.openTime)) }}</span>
							</div>
						</div>
						<div class="infoCon">
							<b><em>组织形式：</em>
								<template v-if="infoObject.organizationalForm != null">
									{{ organizationalForm[infoObject.organizationalForm] }}
								</template>
								<template v-else>--</template>
							</b>
							<b><em>企业类型：</em>{{ selfBusinessType[infoObject.selfBusinessType] }}</b>
							<b><em>注册资金：</em>
								<template v-if="infoObject.registerCapital != null">
									{{ infoObject.registerCapital + '万'}}
								</template>
								<template v-else>--</template>
							</b>
							<b><em>经营场所：</em>
								<div style="margin-left: 155px">
									<template v-if="infoObject.address != null">
										{{ infoObject.address }}
									</template>
									<template v-else>--</template>
								</div>
							</b>
							<b><em>统一社会信用代码：</em>{{ infoObject.socialCreditCode }}</b>
							<b><em>登记机关：</em>{{ infoObject.registerUnit }}</b>
							<b style="width: 100%"><em>经营范围：</em><i>{{ infoObject.businessScope }}</i></b>
							<b style="width: 100%">
								<em>营业执照照片：</em>
								<div class="image-box">
									<el-image :preview-src-list="[infoObject.licenseUrl]" :src="infoObject.licenseUrl"></el-image>
								</div>
							</b>
							<b style="width: 100%">
								<em>意愿协议视频：</em>
								<div class="image-box" v-if="infoObject.wishVideoUrl" @click="openVideo(infoObject.wishVideoUrl)">
								<div style="position: relative; width:100%;height:100%;">
									<video style="width:100%;height:100%;">
									<source
										:src="infoObject.wishVideoUrl"
										type="video/mp4"
									/>
														</video>
									<div style="position: absolute; left: 0; left: 0;width:100%;height:100%;background-color: #FFF;top: 0;opacity: 0;"></div>
								</div>
								<!-- <el-image :src="require('../assets/img/video.png')"></el-image> -->
								</div>
								<span style="padding-top:0; text-align:left" v-else>--</span>
							</b>
							<b style="width: 100%">
								<em>补充文件：</em>
								<div v-if="infoObject.enFileUrl" class="image-box">
									<el-image :preview-src-list="[infoObject.enFileUrl]" :src="infoObject.enFileUrl"></el-image>
								</div>
								<span style="padding-top:0; text-align:left" v-else>--</span>
							</b>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">任务信息
						<router-link to="/assignment">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
						<em><i style="font-size: 16px;margin-right: 5px;"
								class="el-icon-s-data"></i><span>发布任务总数量：{{ taskNumberObj.taskNum }}</span><span>进行中任务：{{ taskNumberObj.hanldingTaskNum }}</span><span
								style="border: 0">已结束任务：{{ taskNumberObj.finishedTaskNum }}</span></em>
					</div>
					<v-tasktable :indivdualId="$route.query.id"></v-tasktable>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">发票信息
						<router-link to="/invoice">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
						<em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i><span
								style="border: 0">发票总数量：{{ invoceNumber }}</span></em>
					</div>
					<invoice-table :indivdualId="$route.query.id" :invoiceType="1"></invoice-table>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
		<el-col :span="24">
			<el-card class="cardTits cardTitss cardTitee" shadow="hover">
			<div class="cardTit" style="font-weight: normal">
				关注企业列表
			</div>
			<el-table :data="weiguanzhu" ref="multipleTable" stripe style="width: 100%">
				<el-table-column prop="" label="" width="50">
				</el-table-column>
				<el-table-column prop="name" label="企业名称">
				</el-table-column>
				<el-table-column prop="socialCreditCode" label="统一社会信用代码">
				</el-table-column>
				<el-table-column prop="attentionTime" label="关注时间">
				<template #default="item">
					{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.attentionTime)) }}
				</template>
				</el-table-column>
				<el-table-column prop="examineStatus" label="审核状态">
				<template #default="item">
					{{item.row.examineStatus == 0 ? "待审核" : "已关注"}}
				</template>
				</el-table-column>
				<el-table-column prop="examineTime" label="审核时间">
				<template #default="item">
					<span v-if="item.row.examineTime == null || item.row.examineTime == ''">-</span>
					<span v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.examineTime)) }}</span>
				</template>
				</el-table-column>
			</el-table>
			</el-card>
		</el-col>
		</el-row>
		<el-dialog
		title="意见协议视频"
		v-model="playerVideo"
		@close="closeVideo"
		width="780px"
		>
		<div class="videoPlayer-style">
			<video ref="videoPlayer" class="video-js vjs-default-skin" poster="">
			<source :src="infoObject.wishVideoUrl" type="video/mp4" />
			</video>
		</div>
		</el-dialog>
	</div>
</template>

<script>
	import InvoiceTable from '../components/table/InvoiceTable.vue'
	import vTasktable from '../components/table/Tasktable.vue'
	// 内容占位符
	import {
		ContentLoader
	} from 'vue-content-loader'
	export default {
		name: "dashboard",
		data() {
			return {
				weiguanzhu: [],
				infoObject: {},
				input1: '',
				taskNumberObj: {
					"businessId": 0,
					"finishedTaskNum": 0,
					"hanldingTaskNum": 0,
					"platformId": 0,
					"taskNum": 0
				},
				organizationalForm: {
					1: '个人经营',
				},
				selfBusinessType: {
					0: '其他',
					1: '个体工商户',
					2: '有限责任公司',
					3: '股份有限责任公司',
					4: '合伙企业',
					5: '个人独资企业',
				},
				invoceNumber: 0
			}
		},
		components: {
			InvoiceTable,
			vTasktable,
			ContentLoader
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},
		async mounted() {
			await this.getInfoDel()
			await this.getTasknumber()
			await this.getInvoicenumber()
		},
		methods: {
			openVideo(url) {
				// 查看视频
				this.$alert('<video width="400" controls height="300" src="' + url +'"></video>', {
					dangerouslyUseHTMLString: true,
					showConfirmButton: false,
					center: true,
					customClass: "seeVideo"
				})
			},
			closeVideo() {
			// 关闭视频
			this.player.pause();
			},
			getInfoDel() {
				// 获取详情信息
				this.$http({
					url: '/api/selfbusiness/selectBusinessByPrimaryKey?businessId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if (data.code === 0) {
						this.infoObject = data.result
						this.againAgreementAlerts()
					}
				})
			},
			getTasknumber() {
				// 获取任务数量
				this.$http({
					url: '/api/selfbusiness/selectTaskCountBySelfId?selfBusinessId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if (data.code === 0) {
						this.taskNumberObj = data.result
					}
				})
			},
			againAgreementAlerts() {
				// 关注企业列表
				this.$http({
					url: "/api/consumer/followList?sevicerId=" + this.infoObject.sevicerId,
					method: "post",
					headers: {
					"Content-Type": "application/json",
					}
				}).then((data) => {
					if (data.code == 0) {
					this.weiguanzhu = data.result
					}
				});
			},
			getInvoicenumber() {
				// 获取发票数量
				this.$http({
					url: '/api/selfbusiness/selectInvoiceNumBySelfId?selfBusinessId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if (data.code === 0) {
						this.invoceNumber = data.result
					}
				})
			},
			openUrl(url) {
				// 打开新窗口查看协议
				this.$http({
					url: "/public/common/oss/pdfPreView",
					method: "post",
					params: {
						ossPath: url
					},
					responseType: 'blob'
				}).then((data) => {
					const blob = new Blob([data]);
					const href = window.URL.createObjectURL(blob)
					window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
				});
			}
		}
	};
</script>

<style scoped>
.infoCon b:nth-child(odd) {
	width: 40%;
}
.infoCon b:nth-child(even) {
	width: 60%;
}
</style>